<template>
    <div class="list_container">
        <!-- 头部 -->
        <Header></Header>
        <!-- 文章列表 -->
        <div class="contain">
            <Card title="最热"
                  width="900px"
                  >
                <div class="list">
                    <!-- 文章 -->
                    <div class="article" v-for="a in articles.list" :key="a.id" @click="toArticle(a.id)">
                        <div class="article_pic" >
                            <img :src="a.cover" alt="">
                        </div>
                        <div class="article_info">
                            <div>{{a.title}}</div>
                        </div>
                    </div>
                </div>
            </Card>

            <div class="right">
                <Card
                        title="最新标签"
                width="316px">
                    <div class="tags-wrap">
                        <div class="tag-box">
                            <span>软件发展</span>
                        </div>
                        <div class="tag-box">
                            <span>C++</span>
                        </div>
                        <div class="tag-box">
                            <span>javaWeb开发</span>
                        </div>
                        <div class="tag-box">
                            <span>软件测试</span>
                        </div>
                        <div class="tag-box">
                            <span>git 使用</span>
                        </div>
                    </div>
                </Card>

            </div>
        </div>
        <!-- 文章列表 -->
        <Footer></Footer>
    </div>
</template>
<script>
    import {get} from '../utils/request'
    import Header from './components/Header'
    import Footer from './components/Footer'
    import Card from './components/card'
    export default {
        data(){
            return {
                articles:{},  // 分页数据
                param:{
                    page:1,
                    pageSize:10
                }
            }
        },
        watch: {
          $route: {
              handler(){
                  this.loadArticles();
              },
              deep: true,
          }
        },
        components:{Header,Footer,Card},
        created(){
            this.loadArticles()
        },
        methods:{
            loadArticles(){
                let categoryId = this.$route.query.categoryId;
                this.param.categoryId = categoryId;
                let url ="/index/article/pageQuery"
                get(url,this.param).then(resp => {
                    this.articles = resp.data;
                })
            },
            toArticle(id){
                this.$router.push({
                    path:"/Article",
                    query:{article:id}
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../assets/scss/variable';
    .list_container {
        width: 100%;
        background-image: $bgImage;
        .contain {
            width: 90%;
            margin:20px auto;
            @extend %flex-row-spb;
            align-items: start;
            .right {
                width:266px;
                .tags-wrap {
                    padding: 10 * $length 24 * $length 30 * $length;
                    .tag-box {
                        display: inline-block;
                        margin-right: 10 * $length;
                        margin-bottom: 10 * $length;
                        padding: 2 * $length 9 * $length;
                        background-color: #f4f8fa;
                        @include border-radius(2 * $length);
                        @extend %cursorPointer;
                        @extend %animate-transition;
                        @include fontStyle(14, 22, 500, #999, center);
                        &:hover {
                            color: #a00505;
                            background-color: rgba(234, 30, 30, 0.1);
                        }
                    }
                }
            }
            .list {
                min-height: 800px;
                width: 100%;
                margin-left:15px ;
                .article {
                    margin-bottom: 1em;
                    padding: 1em 0;
                    & > div {
                        height:200px
                    }
                    .article_pic {
                        width: 300px;
                        overflow: hidden;
                        float: left;
                        img {
                            width: 100%;
                        }
                    }
                    .article_info {
                        margin-left: 320px;
                    }
                }
            }

        }
    }
</style>